'use strict'

<script type="text/javascript" src="resources/node-red-contrib-knx-ultimate/11f26b4500.js"></script>

<script type="text/javascript" src="resources/node-red-contrib-knx-ultimate/htmlUtils.js"></script>

<script type="text/javascript">
  (function () {

    RED.nodes.registerType("knxUltimateHueLight", {
      category: "KNX Ultimate",
      color: "#C0C7E9",
      defaults: {
        //buttonState: {value: true},
        server: { type: "knxUltimate-config", required: false },
        serverHue: { type: "hue-config", required: true },
        name: { value: "" },

        nameLightSwitch: { value: "" },
        GALightSwitch: { value: "" },
        dptLightSwitch: { value: "" },

        nameLightState: { value: "" },
        GALightState: { value: "" },
        dptLightState: { value: "" },

        nameLightDIM: { value: "" },
        GALightDIM: { value: "" },
        dptLightDIM: { value: "" },

        // TAB Color ---------------------------
        nameLightColor: { value: "" },
        GALightColor: { value: "" },
        dptLightColor: { value: "" },

        nameLightColorState: { value: "" },
        GALightColorState: { value: "" },
        dptLightColorState: { value: "" },

        // HSV H hue Color change
        nameLightHSV_H_DIM: { value: "" },
        GALightHSV_H_DIM: { value: "" },
        dptLightHSV_H_DIM: { value: "" },

        nameLightHSV_H_State: { value: "" },
        GALightHSV_H_State: { value: "" },
        dptLightHSV_H_State: { value: "" },

        // HSV S saturation change
        nameLightHSV_S_DIM: { value: "" },
        GALightHSV_S_DIM: { value: "" },
        dptLightHSV_S_DIM: { value: "" },

        nameLightHSV_S_State: { value: "" },
        GALightHSV_S_State: { value: "" },
        dptLightHSV_S_State: { value: "" },
        // -------------------------------------

        nameLightKelvinDIM: { value: "" },
        GALightKelvinDIM: { value: "" },
        dptLightKelvinDIM: { value: "" },

        nameLightKelvinPercentage: { value: "" },
        GALightKelvinPercentage: { value: "" },
        dptLightKelvinPercentage: { value: "" },

        nameLightKelvinPercentageState: { value: "" },
        GALightKelvinPercentageState: { value: "" },
        dptLightKelvinPercentageState: { value: "" },

        nameLightKelvin: { value: "" },
        GALightKelvin: { value: "" },
        dptLightKelvin: { value: "" },

        nameLightKelvinState: { value: "" },
        GALightKelvinState: { value: "" },
        dptLightKelvinState: { value: "" },

        nameLightBrightness: { value: "" },
        GALightBrightness: { value: "" },
        dptLightBrightness: { value: "" },

        nameLightBrightnessState: { value: "" },
        GALightBrightnessState: { value: "" },
        dptLightBrightnessState: { value: "" },

        nameLightBlink: { value: "" },
        GALightBlink: { value: "" },
        dptLightBlink: { value: "" },

        nameLightColorCycle: { value: "" },
        GALightColorCycle: { value: "" },
        dptLightColorCycle: { value: "" },

        nameDaylightSensor: { value: "" },
        GADaylightSensor: { value: "" },
        dptDaylightSensor: { value: "" },

        specifySwitchOnBrightness: { value: "temperature" },
        colorAtSwitchOnDayTime: { value: '{"kelvin":3000, "brightness":100 }' },

        enableDayNightLighting: { value: "no" },
        colorAtSwitchOnNightTime: { value: '{ "kelvin":2700, "brightness":20 }' },

        invertDayNight: { value: false },
        invertDimTunableWhiteDirection: { value: false },

        updateKNXBrightnessStatusOnHUEOnOff: { value: "no" },
        dimSpeed: { value: 5000, required: false },
        HSVDimSpeed: { value: 5000, required: false },
        minDimLevelLight: { value: 10, required: false },
        maxDimLevelLight: { value: 100, required: false },
        readStatusAtStartup: { value: "yes" },
        enableNodePINS: { value: "no" },

        outputs: { value: 0 },
        inputs: { value: 0 },

        hueDevice: { value: "" },
        hueDeviceObject: { value: {} },

        restoreDayMode: { value: "no" }
      },
      inputs: 0,
      outputs: 0,
      icon: "node-hue-icon.svg",
      label: function () {
        return this.name;
      },
      paletteLabel: "Hue Light",
      oneditprepare: function () {
        // Go to the help panel
        try {
          RED.sidebar.show("help");
        } catch (error) { }


        var node = this;
        if ($("#node-input-server").val() === "_ADD_") {
          // Node-Red 4.0.x has a bug not selecting the default server node
          try {
            $("#node-input-server").prop("selectedIndex", 0);
          } catch (error) {
          }
        }
        if ($("#node-input-serverHue").val() === "_ADD_") {
          // Node-Red 4.0.x has a bug not selecting the default server node
          try {
            $("#node-input-serverHue").prop("selectedIndex", 0);
          } catch (error) {
          }
        }

        function onEditPrepare() {
          // TIMER BLINK ####################################################
          let blinkStatus = 2;
          let timerBlinkBackground;
          function blinkBackground(_elementIDwithHashAtTheBeginning) {
            if (timerBlinkBackground !== undefined) clearInterval(timerBlinkBackground);
            timerBlinkBackground = setInterval(() => {
              if (isEven(blinkStatus)) $(_elementIDwithHashAtTheBeginning).css("background-color", "lightgreen");
              if (!isEven(blinkStatus)) $(_elementIDwithHashAtTheBeginning).css("background-color", "");
              blinkStatus += 1;
              if (blinkStatus >= 14) {
                clearInterval(timerBlinkBackground);
                blinkStatus = 2;
                $(_elementIDwithHashAtTheBeginning).css("background-color", "");
              }
            }, 100);
          }
          function isEven(n) {
            return (n % 2 == 0);
          }
          // ################################################################

          $("#tabs").tabs(); // Tabs gestione KNX

          function getDPT(_dpt, _destinationWidget) {
            // DPT Switch command
            // ########################
            $(_destinationWidget).empty();
            $.getJSON("knxUltimateDpts?serverId=" + $("#node-input-server").val() + "&" + { _: new Date().getTime() }, (data) => {
              data.forEach((dpt) => {
                if (dpt.value.startsWith(_dpt)) {
                  // Adjustment for HUE Temperature
                  if (dpt.value.startsWith("7.600")) {
                    $(_destinationWidget).append($("<option></option>").attr("value", dpt.value).text(dpt.text + " - KNX Kelvin range 2000-6535k (Homeassistant color_temperature_mode: absolute)"));
                  } else if (dpt.value.startsWith("9.002")) {
                    $(_destinationWidget).append($("<option></option>").attr("value", dpt.value).text(dpt.text + " - HUE Kelvin range 2000-6535k (Homeassistant color_temperature_mode: absolute_float)"));
                  } else if (dpt.value.startsWith("5.001")) {
                    $(_destinationWidget).append($("<option></option>").attr("value", dpt.value).text(dpt.text + " - Homeassistant color_temperature_mode: relative"));
                  } else {
                    $(_destinationWidget).append($("<option></option>").attr("value", dpt.value).text(dpt.text));
                  }
                }
              });
              // Eval
              const format = "node." + _destinationWidget.replace("#node-input-", "");
              try {
                if (format !== undefined) $(_destinationWidget).val(eval(format).toString());
              } catch (error) { }

            });
          }

          function getGroupAddress(_sourceWidgetAutocomplete, _destinationWidgetName, _destinationWidgetDPT, _additionalSearchTerm) {
            $(_sourceWidgetAutocomplete).autocomplete({
              minLength: 0,
              source: function (request, response) {
                //$.getJSON("csv", request, function( data, status, xhr ) {
                $.getJSON("knxUltimatecsv?nodeID=" + $("#node-input-server").val() + "&" + { _: new Date().getTime() }, (data) => {
                  response(
                    $.map(data, function (value, key) {
                      var sSearch = value.ga + " (" + value.devicename + ") DPT" + value.dpt;
                      for (let index = 0; index < _additionalSearchTerm.length; index++) {
                        const sDPT = _additionalSearchTerm[index];
                        if (htmlUtilsfullCSVSearch(sSearch, request.term + " " + sDPT)) {
                          return {
                            label: value.ga + " # " + value.devicename + " # " + value.dpt, // Label for Display
                            value: value.ga, // Value
                          };
                        }
                      };
                    })
                  );
                });
              },
              select: function (event, ui) {
                // Sets Datapoint and device name automatically
                var sDevName = ui.item.label.split("#")[1].trim();
                try {
                  sDevName = sDevName.substr(sDevName.indexOf(")") + 1).trim();
                } catch (error) { }
                $(_destinationWidgetName).val(sDevName);
                var optVal = $(_destinationWidgetDPT + " option:contains('" + ui.item.label.split("#")[2].trim() + "')").attr("value");
                // Select the option value
                $(_destinationWidgetDPT).val(optVal);
              },
            }).focus(function () {
              $(this).autocomplete('search', $(this).val() + 'exactmatch');
            });
          }

          getDPT("1.", "#node-input-dptLightSwitch");
          getGroupAddress("#node-input-GALightSwitch", "#node-input-nameLightSwitch", "#node-input-dptLightSwitch", ["1."]);

          getDPT("1.", "#node-input-dptLightState");
          getGroupAddress("#node-input-GALightState", "#node-input-nameLightState", "#node-input-dptLightState", ["1."]);

          getDPT("3.007", "#node-input-dptLightDIM");
          getGroupAddress("#node-input-GALightDIM", "#node-input-nameLightDIM", "#node-input-dptLightDIM", ["3.007"]);

          getDPT("5.001", "#node-input-dptLightBrightness");
          getGroupAddress("#node-input-GALightBrightness", "#node-input-nameLightBrightness", "#node-input-dptLightBrightness", ["5.001"]);

          getDPT("5.001", "#node-input-dptLightBrightnessState");
          getGroupAddress("#node-input-GALightBrightnessState", "#node-input-nameLightBrightnessState", "#node-input-dptLightBrightnessState", ["5.001"]);

          getDPT("232.600", "#node-input-dptLightColor");
          getGroupAddress("#node-input-GALightColor", "#node-input-nameLightColor", "#node-input-dptLightColor", ["232.600"]);

          getDPT("232.600", "#node-input-dptLightColorState");
          getGroupAddress("#node-input-GALightColorState", "#node-input-nameLightColorState", "#node-input-dptLightColorState", ["232.600"]);

          getDPT("3.007", "#node-input-dptLightKelvinDIM");
          getGroupAddress("#node-input-GALightKelvinDIM", "#node-input-nameLightKelvinDIM", "#node-input-dptLightKelvinDIM", ["3.007"]);

          getDPT("5.001", "#node-input-dptLightKelvinPercentage");
          getGroupAddress("#node-input-GALightKelvinPercentage", "#node-input-nameLightKelvinPercentage", "#node-input-dptLightKelvinPercentage", ["5.001"]);

          getDPT("5.001", "#node-input-dptLightKelvinPercentageState");
          getGroupAddress("#node-input-GALightKelvinPercentageState", "#node-input-nameLightKelvinPercentageState", "#node-input-dptLightKelvinPercentageState", ["5.001"]);

          getDPT("1.", "#node-input-dptLightBlink");
          getGroupAddress("#node-input-GALightBlink", "#node-input-nameLightBlink", "#node-input-dptLightBlink", ["1."]);

          getDPT("1.", "#node-input-dptLightColorCycle");
          getGroupAddress("#node-input-GALightColorCycle", "#node-input-nameLightColorCycle", "#node-input-dptLightColorCycle", ["1."]);

          getDPT("1.", "#node-input-dptDaylightSensor");
          getGroupAddress("#node-input-GADaylightSensor", "#node-input-nameDaylightSensor", "#node-input-dptDaylightSensor", ["1."]);

          getDPT("7.600", "#node-input-dptLightKelvin");
          getDPT("9.002", "#node-input-dptLightKelvin");
          getDPT("9.002", "#node-input-dptLightKelvinState");
          getDPT("7.600", "#node-input-dptLightKelvinState");
          getGroupAddress("#node-input-GALightKelvin", "#node-input-nameLightKelvin", "#node-input-dptLightKelvin", ["7.600", "9.002"]);
          getGroupAddress("#node-input-GALightKelvinState", "#node-input-nameLightKelvinState", "#node-input-dptLightKelvinState", ["7.600", "9.002"]);

          // HSV ----------------------
          // H
          getDPT("3.007", "#node-input-dptLightHSV_H_DIM");
          getGroupAddress("#node-input-GALightHSV_H_DIM", "#node-input-nameLightHSV_H_DIM", "#node-input-dptLightHSV_H_DIM", ["3.007"]);

          getDPT("5.001", "#node-input-dptLightHSV_H_State");
          getGroupAddress("#node-input-GALightHSV_H_State", "#node-input-nameLightHSV_H_State", "#node-input-dptLightHSV_H_State", ["5.001"]);

          // S
          getDPT("3.007", "#node-input-dptLightHSV_S_DIM");
          getGroupAddress("#node-input-GALightHSV_S_DIM", "#node-input-nameLightHSV_S_DIM", "#node-input-dptLightHSV_S_DIM", ["3.007"]);

          getDPT("5.001", "#node-input-dptLightHSV_S_State");
          getGroupAddress("#node-input-GALightHSV_S_State", "#node-input-nameLightHSV_S_State", "#node-input-dptLightHSV_S_State", ["5.001"]);

          // V
          getDPT("3.007", "#node-input-dptLightHSV_V_DIM");
          getGroupAddress("#node-input-GALightHSV_V_DIM", "#node-input-nameLightHSV_V_DIM", "#node-input-dptLightHSV_V_DIM", ["3.007"]);

          getDPT("5.001", "#node-input-dptLightHSV_V_State");
          getGroupAddress("#node-input-GALightHSV_V_State", "#node-input-nameLightHSV_V_State", "#node-input-dptLightHSV_V_State", ["5.001"]);
          // END HSV ----------------------

          // Get the HUE capabilities to enable/disable UI parts
          var getJsonPromise;
          if ($("#node-input-hueDevice").val() === '') {
            $("#tabs").hide();
            return;
          } else {
            $("#tabs").show();
            if (getJsonPromise !== undefined) getJsonPromise.abort();
            getJsonPromise = $.getJSON("knxUltimateGetLightObject?id=" + $("#node-input-hueDevice").val().split("#")[0] + "&serverId=" + $("#node-input-serverHue").val() + "&" + { _: new Date().getTime() }, (data) => {
              let oLight = data;
              // Check if grouped, to hide/show the "Get current" buttons
              if (oLight.type === "grouped_light") {
                $("#tabs").tabs("enable", "#tabs-4");
                $("#tabs").tabs("enable", "#tabs-3");
                $("#tabs").tabs("enable", "#tabs-2");
                $("#getColorAtSwitchOnDayTimeButton").show();
                $("#getColorAtSwitchOnNightTimeButton").show();
                $("#node-input-specifySwitchOnBrightness").empty().append(
                  $("<option>")
                    .val("no")
                    .text("None")
                ).append(
                  $("<option>")
                    .val("yes")
                    .text("Select color")
                ).append(
                  $("<option>")
                    .val("temperature")
                    .text("Select temperature and brightness")
                );
                $("#node-input-enableDayNightLighting").empty().append(
                  $("<option>")
                    .val("no")
                    .text("No")
                ).append(
                  $("<option>")
                    .val("yes")
                    .text("Select color")
                ).append(
                  $("<option>")
                    .val("temperature")
                    .text("Select temperature and brightness")
                );
                $("#node-input-specifySwitchOnBrightness").val(node.specifySwitchOnBrightness).trigger('change');
                $("#node-input-enableDayNightLighting").val(node.enableDayNightLighting).trigger('change');
                return;
              } else {

                $("#getColorAtSwitchOnDayTimeButton").show();
                $("#getColorAtSwitchOnNightTimeButton").show();
                $("#node-input-specifySwitchOnBrightness").empty().append(
                  $("<option>")
                    .val("no")
                    .text("None")
                );
                $("#node-input-enableDayNightLighting").empty().append(
                  $("<option>")
                    .val("no")
                    .text("No")
                );
              }

              $("#tabs").tabs("disable", "#tabs-4");
              $("#tabs").tabs("disable", "#tabs-3");
              $("#tabs").tabs("disable", "#tabs-2");
              $("#divColorsAtSwitchOn").hide();
              $("#divColorsAtSwitchOnNightTime").hide();
              $("#divTemperatureAtSwitchOn").hide();
              $("#divTemperatureAtSwitchOnNightTime").hide();
              $("#divColorCycle").hide();
              $("#divUpdateKNXBrightnessStatusOnHUEOnOff").hide();
              $("#divBehaviourBrightness").hide();
              $("#comboTemperatureAtSwitchOn").hide();
              $("#comboTemperatureAtSwitchOnNightTime").hide();

              // Enable options/tabs one by one
              if (oLight.dimming !== undefined) {
                $("#tabs").tabs("enable", "#tabs-2");
                $("#divBehaviourBrightness").show();
              }
              if (oLight.color !== undefined) {
                $("#tabs").tabs("enable", "#tabs-4");
                $("#divColorsAtSwitchOn").show();
                $("#divColorsAtSwitchOnNightTime").show();
                $("#divColorCycle").show();
                $("#node-input-specifySwitchOnBrightness").append(
                  $("<option>")
                    .val("yes")
                    .text("Select color")
                );
                $("#node-input-enableDayNightLighting").append(
                  $("<option>")
                    .val("yes")
                    .text("Select color")
                );
              }
              // Check temperature (if the light supports temperature, it support dimming as well)
              if (oLight.color_temperature !== undefined) {
                $("#tabs").tabs("enable", "#tabs-3");
                //$("#tabs").tabs("enable", "#tabs-2");
                $("#node-input-specifySwitchOnBrightness").append(
                  $("<option>")
                    .val("temperature")
                    .text("Select temperature and brightness")
                );
                $("#node-input-enableDayNightLighting").append(
                  $("<option>")
                    .val("temperature")
                    .text("Select temperature and brightness")
                );
                $("#divTemperatureAtSwitchOn").show();
                $("#divTemperatureAtSwitchOnNightTime").show();
                $("#divUpdateKNXBrightnessStatusOnHUEOnOff").show();
                $("#divBehaviourBrightness").show();
                $("#comboTemperatureAtSwitchOn").show();
                $("#comboTemperatureAtSwitchOnNightTime").show();
              } else {
                //$("#tabs").tabs("enable", "#tabs-2");
                $("#node-input-specifySwitchOnBrightness").append(
                  $("<option>")
                    .val("temperature")
                    .text("Select brightness")
                );
                $("#node-input-enableDayNightLighting").append(
                  $("<option>")
                    .val("temperature")
                    .text("Select brightness")
                );
                $("#comboTemperatureAtSwitchOn").val(0);
                $("#comboTemperatureAtSwitchOnNightTime").val(0);
                $("#divTemperatureAtSwitchOn").show();
                $("#divTemperatureAtSwitchOnNightTime").show();
                $("#divUpdateKNXBrightnessStatusOnHUEOnOff").show();
                //$("#divBehaviourBrightness").show();
              }
              $("#node-input-specifySwitchOnBrightness").val(node.specifySwitchOnBrightness).trigger('change');
              $("#node-input-enableDayNightLighting").val(node.enableDayNightLighting).trigger('change');
            });
            setTimeout(function () { if (getJsonPromise !== undefined) getJsonPromise.abort(); }, 10000);
          }
          // Show/Hide the div of the color at swich on
          if (node.specifySwitchOnBrightness === "yes") {
            $("#divColorsAtSwitchOn").show();
            $("#divTemperatureAtSwitchOn").hide();
          } else if (node.specifySwitchOnBrightness === "temperature") {
            $("#divColorsAtSwitchOn").hide();
            $("#divTemperatureAtSwitchOn").show();
          } else {
            $("#divColorsAtSwitchOn").hide();
            $("#divTemperatureAtSwitchOn").hide();
          }

          $("#node-input-specifySwitchOnBrightness").on("change", function () {
            if ($("#node-input-specifySwitchOnBrightness").val() === "yes") {
              $("#divColorsAtSwitchOn").show();
              $("#divTemperatureAtSwitchOn").hide();
              blinkBackground("#colorPickerDay");
            } else if ($("#node-input-specifySwitchOnBrightness").val() === "temperature") {
              $("#divColorsAtSwitchOn").hide();
              $("#divTemperatureAtSwitchOn").show();
            } else {
              $("#divColorsAtSwitchOn").hide();
              $("#divTemperatureAtSwitchOn").hide();
            }
          });

          // Show/Hide and enable/disable day/night Lighting behaviour
          if (node.enableDayNightLighting === "yes") {
            $("#divEnableDayNightLighting").show();
            $("#divCCSBoxAtNightLighting").css({ border: "1px solid dimgrey", "border-radius": "12px", padding: "5px" }); // Add little box to better understand the property page
            $("#divColorsAtSwitchOnNightTime").show();
            $("#divTemperatureAtSwitchOnNightTime").hide();
          } else if (node.enableDayNightLighting === "temperature") {
            $("#divEnableDayNightLighting").show();
            $("#divCCSBoxAtNightLighting").css({ border: "1px solid dimgrey", "border-radius": "12px", padding: "5px" }); // Add little box to better understand the property page
            $("#divColorsAtSwitchOnNightTime").hide();
            $("#divTemperatureAtSwitchOnNightTime").show();
          } else {
            $("#divEnableDayNightLighting").hide();
            $("#divCCSBoxAtNightLighting").css({ border: "", "border-radius": "", padding: "" });
          }

          $("#node-input-enableDayNightLighting").on("change", function () {
            if ($("#node-input-enableDayNightLighting").val() === "yes") {
              $("#divEnableDayNightLighting").show();
              $("#divCCSBoxAtNightLighting").css({ border: "1px solid dimgrey", "border-radius": "12px", padding: "5px" }); // Add little box to better understand the property page
              $("#divColorsAtSwitchOnNightTime").show();
              $("#divTemperatureAtSwitchOnNightTime").hide();
              blinkBackground("#colorPickerNight")
              $("#getColorAtSwitchOnDayTimeButton").text("Get current");
            } else if ($("#node-input-enableDayNightLighting").val() === "temperature") {
              $("#divEnableDayNightLighting").show();
              $("#divCCSBoxAtNightLighting").css({ border: "1px solid dimgrey", "border-radius": "12px", padding: "5px" }); // Add little box to better understand the property page
              $("#divColorsAtSwitchOnNightTime").hide();
              $("#divTemperatureAtSwitchOnNightTime").show();
            } else {
              $("#divEnableDayNightLighting").hide();
              $("#divCCSBoxAtNightLighting").css({ border: "", "border-radius": "", padding: "" });
            }
          });

          $("#getColorAtSwitchOnDayTimeButton").on("click", function () {
            $("#getColorAtSwitchOnDayTimeButton").text("Wait...");
            let jRet;
            let sQuery;
            if ($("#node-input-specifySwitchOnBrightness").val() === "yes") sQuery = "knxUltimateGetHueColor";
            if ($("#node-input-specifySwitchOnBrightness").val() === "temperature") sQuery = "knxUltimateGetKelvinColor";
            $.getJSON(sQuery + "?id=" + $("#node-input-hueDevice").val().split("#")[0] + "&serverId=" + $("#node-input-serverHue").val() + "&" + { _: new Date().getTime() }, (data) => {
              $("#node-input-colorAtSwitchOnDayTime").val(data);
              $("#colorPickerDay").val(data);
              blinkBackground("#colorPickerDay")
              $("#getColorAtSwitchOnDayTimeButton").text("Get again");
            });
          });

          $("#getColorAtSwitchOnNightTimeButton").on("click", function () {
            $("#getColorAtSwitchOnNightTimeButton").text("Wait...");
            let jRet;
            let sQuery;
            if ($("#node-input-enableDayNightLighting").val() === "yes") sQuery = "knxUltimateGetHueColor";
            if ($("#node-input-enableDayNightLighting").val() === "temperature") sQuery = "knxUltimateGetKelvinColor";
            $.getJSON(sQuery + "?id=" + $("#node-input-hueDevice").val().split("#")[0] + "&" + { _: new Date().getTime() }, (data) => {
              $("#node-input-colorAtSwitchOnNightTime").val(data);
              $("#colorPickerNight").val(data);
              blinkBackground("#colorPickerNight")
              $("#getColorAtSwitchOnNightTimeButton").text("Get again");
            });
          });

          // Fill options for minDimLevel and maxDimLevel and comboBrightnessAtSwitchOn (for color brightness at switch on, with temperature toghedher)
          for (let index = 100; index >= 0; index -= 5) {
            if (index === 0) {
              $("#node-input-minDimLevelLight").append($("<option>").val(index).text(index.toString() + "% (Switch Off)"));
              $("#comboBrightnessAtSwitchOn").append($("<option>").val(index).text(index.toString() + "% (Switch Off)"));
              $("#comboBrightnessAtSwitchOnNightTime").append($("<option>").val(index).text(index.toString() + "% (Switch Off)"));
            } else {
              $("#node-input-minDimLevelLight").append($("<option>").val(index).text(index.toString() + "%"));
              $("#comboBrightnessAtSwitchOn").append($("<option>").val(index).text(index.toString() + "%"));
              $("#comboBrightnessAtSwitchOnNightTime").append($("<option>").val(index).text(index.toString() + "%"));
            }
          }
          // Temperatures, from 2000 to 6535K (circa)
          for (let index = 2000; index <= 6500; index += 100) {
            if (index === 2200) {
              $("#comboTemperatureAtSwitchOn").append($("<option>").val(index).text(index.toString() + "K (start of philips white ambiance lights range)"));
              $("#comboTemperatureAtSwitchOnNightTime").append($("<option>").val(index).text(index.toString() + "K (start of philips white ambiance lights range)"));
            } else if (index === 2700) {
              $("#comboTemperatureAtSwitchOn").append($("<option>").val(index).text(index.toString() + "K (warm white, intimate, cozy, personal, for living rooms)"));
              $("#comboTemperatureAtSwitchOnNightTime").append($("<option>").val(index).text(index.toString() + "K (warm white, intimate, cozy, personal, for living rooms)"));
            } else if (index === 3000) {
              $("#comboTemperatureAtSwitchOn").append($("<option>").val(index).text(index.toString() + "K (soft white, warm, calming, for bathrooms and kitchens)"));
              $("#comboTemperatureAtSwitchOnNightTime").append($("<option>").val(index).text(index.toString() + "K (soft white, warm, calming, for bathrooms and kitchens)"));
            } else if (index === 3500) {
              $("#comboTemperatureAtSwitchOn").append($("<option>").val(index).text(index.toString() + "K (neutral white, balanced, friendly, inviting, for office spaces and retail)"));
              $("#comboTemperatureAtSwitchOnNightTime").append($("<option>").val(index).text(index.toString() + "K (not recommended for night time - neutral white, for office spaces and retail)"));
            } else if (index === 4100) {
              $("#comboTemperatureAtSwitchOn").append($("<option>").val(index).text(index.toString() + "K (cool white, precise, clean, focused, for garages and grocery stores)"));
              $("#comboTemperatureAtSwitchOnNightTime").append($("<option>").val(index).text(index.toString() + "K (not recommended for night time - cool white, precise, clean, focused, for garages and grocery stores)"));
            } else if (index === 5000) {
              $("#comboTemperatureAtSwitchOn").append($("<option>").val(index).text(index.toString() + "K (bright white, vibrant, crisp, for warehouses, sports stadiums and healthcare)"));
              $("#comboTemperatureAtSwitchOnNightTime").append($("<option>").val(index).text(index.toString() + "K (not recommended for night time - bright white, vibrant, crisp, for warehouses, sports stadiums and healthcare)"));
            } else if (index === 6500) {
              $("#comboTemperatureAtSwitchOn").append($("<option>").val(index).text(index.toString() + "K (daylight, alert, energetic, for indoor agriculture)"));
              $("#comboTemperatureAtSwitchOnNightTime").append($("<option>").val(index).text(index.toString() + "K (not recommended for night time - daylight, alert, energetic, for indoor agriculture)"));
            } else {
              $("#comboTemperatureAtSwitchOn").append($("<option>").val(index).text(index.toString() + "K"));
              $("#comboTemperatureAtSwitchOnNightTime").append($("<option>").val(index).text(index.toString() + "K"));
            }
          }


          // Calculate kelvin/color
          let json;
          node.colorAtSwitchOnDayTime = node.colorAtSwitchOnDayTime.replace("geen", "green"); // Old bug in "geen" property
          node.colorAtSwitchOnNightTime = node.colorAtSwitchOnNightTime.replace("geen", "green"); // Old bug in "geen" property
          try {
            json = JSON.parse(node.colorAtSwitchOnDayTime);
          } catch (error) {
            console.log("json = JSON.parse(node.colorAtSwitchOnDayTime) in HTML: " + error.message)
          }
          if (json !== undefined && json.kelvin !== undefined) {
            // Kelvin
            $("#comboTemperatureAtSwitchOn").val(json.kelvin);
            $("#comboBrightnessAtSwitchOn").val(json.brightness);
            if (node.specifySwitchOnBrightness !== 'no') $("#node-input-specifySwitchOnBrightness").val('temperature'); // Adjust in case of mismatch (from old geen bug)
          } else if (json !== undefined && json.red !== undefined) {
            // Must transform RGB into HTML HEX color
            try {
              $("#node-input-colorAtSwitchOnDayTime").val("#" + rgbHex(json.red, json.green, json.blue));
            } catch (error) {
            }
            $("#colorPickerDay").val($("#node-input-colorAtSwitchOnDayTime").val());
            if (node.specifySwitchOnBrightness !== 'no') $("#node-input-specifySwitchOnBrightness").val('yes'); // Adjust in case of mismatch (from old geen bug)
          } else {
            // It's already an HEX color
            $("#colorPickerDay").val(node.colorAtSwitchOnDayTime);
            if (node.specifySwitchOnBrightness !== 'no') $("#node-input-specifySwitchOnBrightness").val('yes'); // Adjust in case of mismatch (from old geen bug)
          }
          //Night
          json = undefined;
          try {
            json = JSON.parse(node.colorAtSwitchOnNightTime);
          } catch (error) { }
          if (json !== undefined && json.kelvin !== undefined) {
            // Kelvin
            $("#comboTemperatureAtSwitchOnNightTime").val(json.kelvin);
            $("#comboBrightnessAtSwitchOnNightTime").val(json.brightness);
            if (node.enableDayNightLighting !== 'no') $("#node-input-enableDayNightLighting").val('temperature'); // Adjust in case of mismatch (from old geen bug)
          } else if (json !== undefined && json.red !== undefined) {
            // Must transform RGB into HTML HEX color
            try {
              $("#node-input-colorAtSwitchOnNightTime").val("#" + rgbHex(json.red, json.green, json.blue));
            } catch (error) {
            }
            $("#colorPickerNight").val($("#node-input-colorAtSwitchOnNightTime").val());
            if (node.enableDayNightLighting !== 'no') $("#node-input-enableDayNightLighting").val('yes'); // Adjust in case of mismatch (from old geen bug)
          } else {
            // It's already an HEX color
            $("#colorPickerNight").val(node.colorAtSwitchOnNightTime);
            if (node.enableDayNightLighting !== 'no') $("#node-input-enableDayNightLighting").val('yes'); // Adjust in case of mismatch (from old geen bug)
          }


          $("#comboTemperatureAtSwitchOn, #comboBrightnessAtSwitchOn").on("change", function () {
            $("#node-input-colorAtSwitchOnDayTime").val('{ "kelvin":' + $("#comboTemperatureAtSwitchOn").val() + ', "brightness":' + $("#comboBrightnessAtSwitchOn").val() + ' }');
          });
          $("#comboTemperatureAtSwitchOnNightTime, #comboBrightnessAtSwitchOnNightTime").on("change", function () {
            $("#node-input-colorAtSwitchOnNightTime").val('{ "kelvin":' + $("#comboTemperatureAtSwitchOnNightTime").val() + ', "brightness":' + $("#comboBrightnessAtSwitchOnNightTime").val() + ' }');
          });

          // Create and put the JSON to node-input-colorAtSwitchOnDayTime
          $("#colorPickerDay").on("change", function () {
            $("#node-input-colorAtSwitchOnDayTime").val(this.value);
          });
          $("#colorPickerNight").on("change", function () {
            $("#node-input-colorAtSwitchOnNightTime").val(this.value);
          });


          $("#node-input-minDimLevelLight").val(node.minDimLevelLight);
          for (let index = 100; index >= 10; index--) {
            $("#node-input-maxDimLevelLight").append(
              $("<option>")
                .val(index)
                .text(index.toString() + "%")
            );
          }
          $("#node-input-maxDimLevelLight").val(node.maxDimLevelLight);

        }

        function Go() {
          $("#waitWindow").hide();
          $("#mainWindow").show();
          // $.post("banana", { func: "getNameAndTime" }, function (data) {
          //   //alert(data.body); // John
          // }, "json");
          try {
            RED.sidebar.show("help");
          } catch (error) { }
          onEditPrepare();
          node.yamlEditor = RED.editor.createEditor({
            id: 'aceEditor',
            mode: 'ace/mode/text'
          });
          node.yamlEditor.session.setValue(yamelize());
          $('[id*="node-input-"]').on('keyup change autocompletechange', function () {
            try {
              node.yamlEditor.session.setValue(yamelize());
            } catch (error) {
            }
          });
        }


        // 19/02/2020 Used to get the server sooner als deploy.
        $("#node-input-serverHue").change(function () {
          try {
            if ($("#node-input-serverHue").val() !== "_ADD_") {
              $("#waitWindow").show();
              $("#mainWindow").hide();
              checkConnection();
            } else {
              Go();
            }
          } catch (error) { }
        });

        // Autocomplete suggestion with HUE Lights
        $("#node-input-name").autocomplete({
          minLength: 0,
          source: function (request, response) {
            $.getJSON("KNXUltimateGetResourcesHUE?rtype=light&serverId=" + $("#node-input-serverHue").val() + "&" + { _: new Date().getTime() }, (data) => {
              response(
                $.map(data.devices, function (value, key) {
                  var sSearch = value.name;
                  if (!value.name.includes("I'm still connecting")) {
                    if (htmlUtilsfullCSVSearch(sSearch, request.term)) {
                      return {
                        hueDevice: value.id,
                        value: value.name,
                      };
                    } else {
                      return null;
                    }
                  } else {
                    return {
                      hueDevice: value.id,
                      value: value.name,
                    };
                  }
                })
              );
            });
          },
          select: function (event, ui) {
            // Distinguish between group of lights an single light.
            if (ui.item.value.toLowerCase().startsWith("grouped_light")) {
              $("#node-input-hueDevice").val(ui.item.hueDevice + "#grouped_light");
            } else {
              $("#node-input-hueDevice").val(ui.item.hueDevice + "#light");
            }
            Go();
          }
        }).focus(function () {
          $(this).autocomplete('search', $(this).val() + 'exactmatch');
        });

        // Timer connection to backend ####################################################
        let timerWaitBackEndCounter = 0;
        function checkConnection() {
          if (this.timerWaitBackEnd !== undefined) clearTimeout(this.timerWaitBackEnd);
          if ($("#node-input-serverHue").val() === undefined) {
            // Someone has FULL deployed node-red, exit.
            return;
          }
          this.timerWaitBackEnd = setTimeout(() => {
            timerWaitBackEndCounter++;
            if (timerWaitBackEndCounter > 20) {
              timerWaitBackEndCounter = 0;
              const myNotification = RED.notify("Something went wrong. Please make sure the HUE bridge connection is properly configured. For further info, see the node-red log. IF YOU ARE CREATING A NEW HUE CONFIGURATION NODE, PLEASE DEPLOY AND RETRY.",
                {
                  modal: false,
                  fixed: true,
                  type: 'error',
                  buttons: [
                    {
                      text: "OK",
                      click: function (e) {
                        myNotification.close();
                      }
                    }]
                })
              $("#waitWindow").hide();
              $("#mainWindow").show();
              $("#tabs").hide();
              return;
            }
            // Check wether the HUE node has is connected and the devices have already been read.
            // ##########################################################
            $.getJSON("knxultimateCheckHueConnected?serverId=" + $("#node-input-serverHue").val() + "&" + { _: new Date().getTime() }, (data) => {
              if (data.ready === true) {
                Go();
              } else {
                checkConnection();
              }
            });
            // ##########################################################
          }, 500);
        }
        if ($("#node-input-serverHue").val() === "_ADD_") {
          Go();
        } else {
          checkConnection();
        }
        // ################################################################

      },

      oneditsave: function () {
        // Return to the info tab
        try {
          RED.sidebar.show("info");
        } catch (error) { }

        //RED.sidebar.removeTab("tabNRColor");
        if ($("#node-input-enableNodePINS").val() === "yes") {
          this.outputs = 1;
          this.inputs = 1;
        } else {
          this.outputs = 0;
          this.inputs = 0;
        }
      },
      oneditcancel: function () {
        // Return to the info tab
        try {
          RED.sidebar.show("info");
        } catch (error) { }
        //RED.sidebar.removeTab("tabNRColor");
        //RED.sidebar.show("help");

      },
      oneditresize: function (size) {
        //var height = size.height;    
        //$('.editor-tray-content').css({ "width": "2700px" });
      }
    });

    function rgbHex(red, green, blue, alpha) {
      const toHex = (red, green, blue, alpha) => ((blue | green << 8 | red << 16) | 1 << 24).toString(16).slice(1) + alpha;
      const parseCssRgbString = (input) => {
        const parts = input.replace(/rgba?\(([^)]+)\)/, '$1').split(/[,\s/]+/).filter(Boolean);
        if (parts.length < 3) {
          return;
        }

        const parseValue = (value, max) => {
          value = value.trim();

          if (value.endsWith('%')) {
            return Math.min(Number.parseFloat(value) * max / 100, max);
          }

          return Math.min(Number.parseFloat(value), max);
        };

        const red = parseValue(parts[0], 255);
        const green = parseValue(parts[1], 255);
        const blue = parseValue(parts[2], 255);
        let alpha;

        if (parts.length === 4) {
          alpha = parseValue(parts[3], 1);
        }

        return [red, green, blue, alpha];
      };

      let isPercent = (red + (alpha || '')).toString().includes('%');

      if (typeof red === 'string' && !green) { // Single string parameter.
        const parsed = parseCssRgbString(red);
        if (!parsed) {
          throw new TypeError('Invalid or unsupported color format.');
        }

        isPercent = false;
        [red, green, blue, alpha] = parsed;
      } else if (alpha !== undefined) {
        alpha = Number.parseFloat(alpha);
      }

      if (typeof red !== 'number'
        || typeof green !== 'number'
        || typeof blue !== 'number'
        || red > 255
        || green > 255
        || blue > 255
      ) {
        throw new TypeError('Expected three numbers below 256');
      }

      if (typeof alpha === 'number') {
        if (!isPercent && alpha >= 0 && alpha <= 1) {
          alpha = Math.round(255 * alpha);
        } else if (isPercent && alpha >= 0 && alpha <= 100) {
          alpha = Math.round(255 * alpha / 100);
        } else {
          throw new TypeError(`Expected alpha value (${alpha}) as a fraction or percentage`);
        }

        alpha = (alpha | 1 << 8).toString(16).slice(1); // eslint-disable-line no-mixed-operators
      } else {
        alpha = '';
      }

      return toHex(red, green, blue, alpha);
    }
    function yamelize() {
      try {
        // Get the HUE Node properties and transform it into yaml
        let sYaml = '- name: "' + $("#node-input-name").val() + '"' + "\n";
        sYaml += $("#node-input-GALightSwitch").val() != '' ? '  address: "' + $("#node-input-GALightSwitch").val() + '"' + "\n" : '';
        sYaml += $("#node-input-GALightState").val() != '' ? '  state_address: "' + $("#node-input-GALightState").val() + '"' + "\n" : '';
        sYaml += $("#node-input-GALightBrightness").val() != '' ? '  brightness_address: "' + $("#node-input-GALightBrightness").val() + '"' + "\n" : '';
        sYaml += $("#node-input-GALightBrightnessState").val() != '' ? '  brightness_state_address: "' + $("#node-input-GALightBrightnessState").val() + '"' + "\n" : '';

        //#region color_temperature_mode
        // ----------------------------
        if ($("#node-input-GALightKelvinPercentage").val !== '') {

          // color_temperature_mode: relative
          sYaml += '  color_temperature_mode: relative' + '\n';
          sYaml += '  color_temperature_address: "' + $("#node-input-GALightKelvinPercentage").val() + '"\n';
          sYaml += $("#node-input-GALightKelvinPercentageState").val() != '' ? '  color_temperature_state_address: "' + $("#node-input-GALightKelvinPercentageState").val() + '"' + "\n" : '';
          sYaml += '  min_kelvin: 2200' + '\n';
          sYaml += '  max_kelvin: 6500' + '\n';

        } else if ($("#node-input-GALightKelvin").val() !== '') {

          if ($("#node-input-dptLightKelvin").val() === '7.600') {
            sYaml += '  color_temperature_mode: absolute' + '\n';
            sYaml += '  color_temperature_address: "' + $("#node-input-GALightKelvin").val() + '"\n';
            if ($("#node-input-dptLightKelvinState").val() === '7.600') {
              // Add the status only if also 7.600
              sYaml += $("#node-input-GALightKelvinState").val() != '' ? '  color_temperature_state_address: "' + $("#node-input-GALightKelvinState").val() + '"' + "\n" : '';
            }
            sYaml += '  min_kelvin: 2200' + '\n';
            sYaml += '  max_kelvin: 6500' + '\n';

          } else if ($("#node-input-dptLightKelvin").val() === '9.002') {

            sYaml += '  color_temperature_mode: absolute_float' + '\n';
            sYaml += '  color_temperature_address: "' + $("#node-input-GALightKelvin").val() + '"\n';
            if ($("#node-input-dptLightKelvinState").val() === '9.002') {
              // Add the status only if also 7.600
              sYaml += $("#node-input-GALightKelvinState").val() != '' ? '  color_temperature_state_address: "' + $("#node-input-GALightKelvinState").val() + '"' + "\n" : '';
            }
            sYaml += '  min_kelvin: 2200' + '\n';
            sYaml += '  max_kelvin: 6500' + '\n';

          }
        }
        // ----------------------------
        //#endregion

        sYaml += $("#node-input-GALightColor").val() != '' ? '  color_address: "' + $("#node-input-GALightColor").val() + '"' + "\n" : '';
        sYaml += $("#node-input-GALightColorState").val() != '' ? '  color_state_address: "' + $("#node-input-GALightColorState").val() + '"' + "\n" : '';

        return (sYaml);
      } catch (error) { }
    }

  }())

</script>



<script type="text/html" data-template-name="knxUltimateHueLight">
  <div id="waitWindow">
    <br/><br/><p align="center"><i class="fa-solid fa-hourglass-start fa-spin-pulse fa-4x"></i><br/><br/>
    Wait, i'm talking to your HUE bridge...
    </p>
  </div>
  <div  id="mainWindow" hidden>
    <div class="form-row">
      <b>HUE Light/Group node</b>&nbsp&nbsp<span style="color:red" &nbsp &nbsp<i class="fa fa-youtube"></i></span>&nbsp<a
        target="_blank" href="https://youtu.be/jjEUI1J8bkA"><u>Youtube sample</u></a>
      <br />
      <br />
      <p align="center">
        <i class="fa-regular fa-lightbulb fa-bounce fa-4x"></i>
      </p>
      <br />
      <label for="node-input-server">
        <img
          src=""></img>
        KNX GW
      </label>
      <input type="text" id="node-input-server" />
    </div>

    <div class="form-row">
      <label for="node-input-serverHue">
        <img
          src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAA0VXHyAAABFUlEQVQ4EZWSsWoCQRCG1yiENEFEi6QSkjqWWoqFoBYJ+Br6JHkMn8Iibd4ihQpaJIhWNkry/ZtdGZY78Qa+m39nZ+dm9s4550awglNBluS/gVtAX6KgDclf68w2OThgfR9iT/jnoEv4TtByDThWTCDKW4SSZTf/zj9/eZbN+izTDuKGimu0vPF8B/YN8aC8LmcOj/AAn9CFTEs70Js/oGqy79C69bqJ5XbQI2kGO5N8QL9D08S8zBtBF5ZaVsznpCMoqJnVdjTpb1Db0fwIWmQV6BLXzFOYgA6/gDVfQN9bBWp2J2hdWDPoBV5FrKnAJutHikk/CHHR8i7x4iG7qQ720IYvu3GFbpHjx3pFrOFYkA354z/5bkK826phyAAAAABJRU5ErkJggg==" />
        HUE Bridge
      </label>
      <input type="text" id="node-input-serverHue" />
    </div>

    <br />
    <p>
      <b>Philips HUE</b>
    </p>

    <div class="form-row">
      <label for="node-input-hueDevice">
        <i class="fa fa-play-circle"></i>&nbspName</label>
      <input type="text" id="node-input-name" placeholder="Enter your hue device name" />
      <input type="hidden" id="node-input-hueDevice" />
    </div>

    <br />

    <div id="tabs" hidden" style="width: 900px;">
      <ul>
        <li><a href="#tabs-1"><i class="fa-solid fa-toggle-on"></i> Switch</a></li>
        <li><a href="#tabs-2"><i class="fa-solid fa-arrow-up-wide-short"></i> Dim</a></li>
        <li><a href="#tabs-3"><i class="fa-solid fa-temperature-quarter"></i> Tunable white</a></li>
        <li><a href="#tabs-4"><i class="fa-solid fa-palette"></i> RGB/HSV</a></li>
        <li><a href="#tabs-5"><i class="fa-solid fa-heart-circle-check"></i> Effects</a></li>
        <li><a href="#tabs-6"><i class="fa-solid fa-code-merge"></i> Behaviour</a></li>
        <li><a href="#tabs-7"><i class="fa-solid fa-house"></i> Home Assistant Export (BETA)</a></li>
      </ul>
      <div id="tabs-1">
        <p>
        <div class="form-row">
          <label for="node-input-nameLightSwitch" style="width:110px;"><i class="fa fa-play-circle-o"></i> Control</label>

          <label for="node-input-GALightSwitch" style="width:20px;">GA</label>
          <input type="text" id="node-input-GALightSwitch" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">

          <label for="node-input-dptLightSwitch" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightSwitch" style="width:140px;"></select>

          <label for="node-input-nameLightSwitch" style="width:50px; margin-left: 0px; text-align: right;">Name</label>
          <input type="text" id="node-input-nameLightSwitch" style="width:190px;margin-left: 5px; text-align: left;">
        </div>
        <div class="form-row">
          <label for="node-input-nameLightState" style="width:110px;"><i class="fa fa-question-circle"></i> Status</label>

          <label for="node-input-GALightState" style="width:20px;">GA</label>
          <input type="text" id="node-input-GALightState" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">

          <label for="node-input-dptLightState" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightState" style="width:140px;"></select>

          <label for="node-input-nameLightState" style="width:50px; margin-left: 0px; text-align: right;"><span
              data-i18n="knxUltimateHueLight.node-input-name"></span></label>
          <input type="text" id="node-input-nameLightState" style="width:190px;margin-left: 5px; text-align: left;">
        </div>
        </p>
      </div>
      <div id="tabs-2">
        <p>
          <img src="resources/node-red-contrib-knx-ultimate/dim.png" style="width: 900px;">
        <div class="form-row">
          <label for="node-input-nameLightDIM" style="width:110px;"><i class="fa fa-play-circle-o"></i> Control dim</label>

          <label for="node-input-GALightDIM" style="width:20px;">GA</label>
          <input type="text" id="node-input-GALightDIM" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">

          <label for="node-input-dptLightDIM" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightDIM" style="width:140px;"></select>

          <label for="node-input-nameLightDIM" style="width:50px; margin-left: 0px; text-align: right;"><span
              data-i18n="knxUltimateHueLight.node-input-name"></span></label>
          <input type="text" id="node-input-nameLightDIM" style="width:190px;margin-left: 5px; text-align: left;">
        </div>
        <div class="form-row">
          <label for="node-input-nameLightBrightness" style="width:110px;"><i class="fa fa-play-circle-o"></i> Control
            %</label>

          <label for="node-input-GALightBrightness" style="width:20px;">GA</label>
          <input type="text" id="node-input-GALightBrightness" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">

          <label for="node-input-dptLightBrightness" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightBrightness" style="width:140px;"></select>

          <label for="node-input-nameLightBrightness" style="width:50px; margin-left: 0px; text-align: right;"><span
              data-i18n="knxUltimateHueLight.node-input-name"></span></label>
          <input type="text" id="node-input-nameLightBrightness" style="width:190px;margin-left: 5px; text-align: left;">
        </div>

        <div class="form-row">
          <label for="node-input-nameLightBrightnessState" style="width:110px;"><i class="fa fa-question-circle"></i> Status %</label>

          <label for="node-input-GALightBrightnessState" style="width:20px;"><span
              data-i18n="knxUltimateHueLight.node-input-GALightState"></span></label>
          <input type="text" id="node-input-GALightBrightnessState" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">

          <label for="node-input-dptLightBrightnessState"
            style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightBrightnessState" style="width:140px;"></select>

          <label for="node-input-nameLightBrightnessState" style="width:50px; margin-left: 0px; text-align: right;"><span
              data-i18n="knxUltimateHueLight.node-input-name"></span></label>
          <input type="text" id="node-input-nameLightBrightnessState"
            style="width:190px;margin-left: 5px; text-align: left;">
        </div>   
        <div class="form-row">
          <label for="node-input-dimSpeed" style="width:260px">
            <i class="fa fa-bolt"></i> Dim Speed (ms)
          </label>
          <input type="text" id="node-input-dimSpeed" placeholder='Default is 5000' style="width:210px">
        </div>
        <div class="form-row">
          <label for="node-input-minDimLevelLight" style="width:260px;">
            <i class="fa fa-clone"></i> Min Dim Brightness
          </label>
          <select id="node-input-minDimLevelLight">
            <option value="useHueLightLevel">Use minimum brightness specified in the HUE light</option>
          </select>
        </div>
        <div class="form-row">
          <label for="node-input-maxDimLevelLight" style="width:260px;">
            <i class="fa fa-clone"></i> Max Dim Brightness
          </label>
          <select id="node-input-maxDimLevelLight"></select>
        </div>    
        </p>
      </div>
      <div id="tabs-3">
        <p>
          <img src="resources/node-red-contrib-knx-ultimate/tunablewhite.png" style="width: 900px;">
        <div class="form-row">
          <label for="node-input-nameLightKelvinDIM" style="width:110px;"><i class="fa fa-play-circle-o"></i> Control dim</label>

          <label for="node-input-GALightKelvinDIM" style="width:20px;">GA</label>
          <input type="text" id="node-input-GALightKelvinDIM" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">

          <label for="node-input-dptLightKelvinDIM" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightKelvinDIM" style="width:140px;"></select>

          <label for="node-input-nameLightKelvinDIM" style="width:50px; margin-left: 0px; text-align: right;">Name</label>
          <input type="text" id="node-input-nameLightKelvinDIM" style="width:190px;margin-left: 5px; text-align: left;">
        </div>
        <div class="form-row">
          <label for="node-input-nameLightKelvinPercentage" style="width:110px;"><i class="fa fa-play-circle-o"></i> Control
            %</label>

          <label for="node-input-GALightKelvinPercentage" style="width:20px;">GA</label>
          <input type="text" id="node-input-GALightKelvinPercentage" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">

          <label for="node-input-dptLightKelvinPercentage" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightKelvinPercentage" style="width:140px;"></select>

          <label for="node-input-nameLightKelvinPercentage"
            style="width:50px; margin-left: 0px; text-align: right;">Name</label>
          <input type="text" id="node-input-nameLightKelvinPercentage" style="width:190px;margin-left: 5px; text-align: left;">
        </div>
        <div class="form-row">
          <label for="node-input-nameLightKelvinPercentageState" style="width:110px;"><i class="fa fa-question-circle"></i> Status
            %</label>

          <label for="node-input-GALightKelvinPercentageState" style="width:20px;">GA</label>
          <input type="text" id="node-input-GALightKelvinPercentageState" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">

          <label for="node-input-dptLightKelvinPercentageState" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightKelvinPercentageState" style="width:140px;"></select>

          <label for="node-input-nameLightKelvinPercentageState" style="width:50px; margin-left: 0px; text-align: right;">Name</label>
          <input type="text" id="node-input-nameLightKelvinPercentageState" style="width:190px;margin-left: 5px; text-align: left;">
        </div>
        <div class="form-row">
          <label for="node-input-nameLightKelvin" style="width:110px;"><i class="fa fa-play-circle-o"></i> Control
            Kelvin</label>

          <label for="node-input-GALightKelvin" style="width:20px;">GA</label>
          <input type="text" id="node-input-GALightKelvin" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">

          <label for="node-input-dptLightKelvin" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightKelvin" style="width:140px;"></select>

          <label for="node-input-nameLightKelvin" style="width:50px; margin-left: 0px; text-align: right;">Name</label>
          <input type="text" id="node-input-nameLightKelvin" style="width:190px;margin-left: 5px; text-align: left;">
        </div>        
        <div class="form-row">
          <label for="node-input-nameLightKelvinState" style="width:110px;"><i class="fa fa-question-circle"></i> Status
            Kelvin</label>
          <label for="node-input-GALightKelvinState" style="width:20px;">GA</label>
          <input type="text" id="node-input-GALightKelvinState" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">

          <label for="node-input-dptLightKelvinState" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightKelvinState" style="width:140px;"></select>

          <label for="node-input-nameLightKelvinState" style="width:50px; margin-left: 0px; text-align: right;">Name</label>
          <input type="text" id="node-input-nameLightKelvinState" style="width:190px;margin-left: 5px; text-align: left;">
        </div>
        <div class="form-row">
          <label style="width:170px" for="node-input-invertDimTunableWhiteDirection">
            <i class="fa fa-shuffle"></i> Invert dim direction
          </label>
          <input type="checkbox" id="node-input-invertDimTunableWhiteDirection"
            style="display:inline-block; width:auto; vertical-align:top;" />
        </div>
        </p>
      </div>
      <div id="tabs-4">
        <p>
          <img src="resources/node-red-contrib-knx-ultimate/rgb.png" style="width: 900px;">
          <p><b> RGB section</b></p>
          <div class="form-row">
          <label for="node-input-nameLightColor" style="width:110px;"><i class="fa fa-play-circle-o"></i> Control rgb</label>

          <label for="node-input-GALightColor" style="width:20px;"><span
              data-i18n="knxUltimateHueLight.node-input-GALightState"></span></label>
          <input type="text" id="node-input-GALightColor" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">

          <label for="node-input-dptLightColor" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightColor" style="width:140px;"></select>

          <label for="node-input-nameLightColor" style="width:50px; margin-left: 0px; text-align: right;"><span
              data-i18n="knxUltimateHueLight.node-input-name"></span></label>
          <input type="text" id="node-input-nameLightColor" style="width:190px;margin-left: 5px; text-align: left;">
        </div>
        <div class="form-row">
          <label for="node-input-nameLightColorState" style="width:110px;"><i class="fa fa-question-circle"></i> Status rgb</label>

          <label for="node-input-GALightColorState" style="width:20px;"><span
              data-i18n="knxUltimateHueLight.node-input-GALightState"></span></label>
          <input type="text" id="node-input-GALightColorState" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">

          <label for="node-input-dptLightColorState" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightColorState" style="width:140px;"></select>

          <label for="node-input-nameLightColorState" style="width:50px; margin-left: 0px; text-align: right;"><span
              data-i18n="knxUltimateHueLight.node-input-name"></span></label>
          <input type="text" id="node-input-nameLightColorState" style="width:190px;margin-left: 5px; text-align: left;">
        </div>

        <p><b> HSV section</b></p>
        <!-- // HSV Color change
        // nameLightHSV_H_DIM: { value: "" },
        // GALightHSV_H_DIM: { value: "" },
        // dptLightHSV_H_DIM: { value: "" }, -->
        <div class="form-row">
          <label for="node-input-nameLightHSV_H_DIM" style="width:110px;"><i class="fa fa-play-circle-o"></i> Control H dim</label>

          <label for="node-input-GALightHSV_H_DIM" style="width:20px;"><span
              data-i18n="knxUltimateHueLight.node-input-GALightState"></span></label>
          <input type="text" id="node-input-GALightHSV_H_DIM" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">
 
          <label for="node-input-dptLightHSV_H_DIM" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightHSV_H_DIM" style="width:140px;"></select>

          <label for="node-input-nameLightHSV_H_DIM" style="width:50px; margin-left: 0px; text-align: right;"><span
              data-i18n="knxUltimateHueLight.node-input-name"></span></label>
          <input type="text" id="node-input-nameLightHSV_H_DIM" style="width:190px;margin-left: 5px; text-align: left;">
        </div>
        <div class="form-row">
          <label for="node-input-nameLightHSV_H_State" style="width:110px;"><i class="fa fa-question-circle"></i> Status H %</label>

          <label for="node-input-GALightHSV_H_State" style="width:20px;"><span
              data-i18n="knxUltimateHueLight.node-input-GALightState"></span></label>
          <input type="text" id="node-input-GALightHSV_H_State" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">

          <label for="node-input-dptLightHSV_H_State" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightHSV_H_State" style="width:140px;"></select>

          <label for="node-input-nameLightHSV_H_State" style="width:50px; margin-left: 0px; text-align: right;"><span
              data-i18n="knxUltimateHueLight.node-input-name"></span></label>
          <input type="text" id="node-input-nameLightHSV_H_State" style="width:190px;margin-left: 5px; text-align: left;">
        </div>

        <!-- // HSV Saturation change
        nameLightHSV_S_DIM: { value: "" },
        GALightHSV_S_DIM: { value: "" },
        dptLightHSV_S_DIM: { value: "" },
        nameLightHSV_S_State: { value: "" },
        GALightHSV_S_State: { value: "" },
        dptLightHSV_S_State: { value: "" }, -->
        <div class="form-row">
          <label for="node-input-nameLightHSV_S_DIM" style="width:110px;"><i class="fa fa-play-circle-o"></i> Control S dim</label>

          <label for="node-input-GALightHSV_S_DIM" style="width:20px;"><span
              data-i18n="knxUltimateHueLight.node-input-GALightState"></span></label>
          <input type="text" id="node-input-GALightHSV_S_DIM" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">
 
          <label for="node-input-dptLightHSV_S_DIM" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightHSV_S_DIM" style="width:140px;"></select>

          <label for="node-input-nameLightHSV_S_DIM" style="width:50px; margin-left: 0px; text-align: right;"><span
              data-i18n="knxUltimateHueLight.node-input-name"></span></label>
          <input type="text" id="node-input-nameLightHSV_S_DIM" style="width:190px;margin-left: 5px; text-align: left;">
        </div>
        <div class="form-row">
          <label for="node-input-nameLightHSV_S_State" style="width:110px;"><i class="fa fa-question-circle"></i> Status S %</label>

          <label for="node-input-GALightHSV_S_State" style="width:20px;"><span
              data-i18n="knxUltimateHueLight.node-input-GALightState"></span></label>
          <input type="text" id="node-input-GALightHSV_S_State" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">

          <label for="node-input-dptLightHSV_S_State" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightHSV_S_State" style="width:140px;"></select>

          <label for="node-input-nameLightHSV_S_State" style="width:50px; margin-left: 0px; text-align: right;"><span
              data-i18n="knxUltimateHueLight.node-input-name"></span></label>
          <input type="text" id="node-input-nameLightHSV_S_State" style="width:190px;margin-left: 5px; text-align: left;">
        </div>

        <!-- // HSV V Brightness change
        nameLightHSV_V_DIM: { value: "" },
        GALightHSV_V_DIM: { value: "" },
        dptLightHSV_V_DIM: { value: "" },
        nameLightHSV_V_State: { value: "" },
        GALightHSV_V_State: { value: "" },
        dptLightHSV_V_State: { value: "" }, -->
        <div class="form-row">
          <label for="node-input-HSVDimSpeed" style="width:260px">
            <i class="fa fa-bolt"></i> Dim Speed (ms)
          </label>
          <input type="text" id="node-input-HSVDimSpeed" placeholder='Default is 5000' style="width:210px">
        </div>
        
        </p>
      </div>
      <div id="tabs-5">
        <p>
        <div class="form-row">
          <label for="node-input-nameLightBlink" style="width:110px;"><i class="fa fa-play-circle-o"></i> Blink</label>

          <label for="node-input-GALightBlink" style="width:20px;"><span
              data-i18n="knxUltimateHueLight.node-input-GALightState"></span></label>
          <input type="text" id="node-input-GALightBlink" placeholder="Ex: 1/1/1"
            style="width:70px;margin-left: 5px; text-align: left;">

          <label for="node-input-dptLightBlink" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
          <select id="node-input-dptLightBlink" style="width:140px;"></select>

          <label for="node-input-nameLightBlink" style="width:50px; margin-left: 0px; text-align: right;"><span
              data-i18n="knxUltimateHueLight.node-input-name"></span></label>
          <input type="text" id="node-input-nameLightBlink" style="width:190px;margin-left: 5px; text-align: left;">
        </div>

        <div id="divColorCycle">
          <div class="form-row">
            <label for="node-input-nameLightColorCycle" style="width:110px;"><i class="fa fa-play-circle-o"></i> Color
              Cycle</label>

            <label for="node-input-GALightColorCycle" style="width:20px;">GA</label>
            <input type="text" id="node-input-GALightColorCycle" placeholder="Ex: 1/1/1"
              style="width:70px;margin-left: 5px; text-align: left;">

            <label for="node-input-dptLightColorCycle" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
            <select id="node-input-dptLightColorCycle" style="width:140px;"></select>

            <label for="node-input-nameLightColorCycle" style="width:50px; margin-left: 0px; text-align: right;"><span
                data-i18n="knxUltimateHueLight.node-input-name"></span></label>
            <input type="text" id="node-input-nameLightColorCycle" style="width:190px;margin-left: 5px; text-align: left;">
          </div>
        </div>
        </p>
      </div>
      <div id="tabs-6">
        <p>
        <div class="form-row">
          <label style="width:260px;" for="node-input-readStatusAtStartup"><i class="fa fa-question-circle"></i> Read status at
            startup</label>
          <select id="node-input-readStatusAtStartup">
            <option value="no">No</option>
            <option value="yes">Yes, and emit KNX telegrams.</option>
          </select>
        </div>
        <div class="form-row" id="divUpdateKNXBrightnessStatusOnHUEOnOff">
          <label style="width:260px;" for="node-input-updateKNXBrightnessStatusOnHUEOnOff">
            <i class="fa fa-tag"></i> KNX Brightness Status
          </label>
          <select id="node-input-updateKNXBrightnessStatusOnHUEOnOff">
            <option value="onhueoff">When HUE light is Off send 0%. When HUE On, restore previous value (Default KNX behaviour)</option>
            <option value="no">Leave as is (default HUE behaviour)</option>
          </select>
        </div>
        <div id ="divBehaviourBrightness">
          <div class="form-row">
            <label for="node-input-specifySwitchOnBrightness" style="width:260px;">
              <i class="fa fa-tag"></i> Switch on behaviour
            </label>
            <select id="node-input-specifySwitchOnBrightness">
              <option value="no">None</option>
              <!-- <option value="temperature">Select temperature and brightness</option>
              <option value="yes">Select color</option> -->
            </select>
          </div>

          <div class="form-row" id="divColorsAtSwitchOn">
            <label for="node-input-colorAtSwitchOnDayTime" style="width:260px">
            </label>
            <input type="hidden" id="node-input-colorAtSwitchOnDayTime">
            <input type="color" id="colorPickerDay" style="width:260px">
            <button id="getColorAtSwitchOnDayTimeButton" type="button" class="red-ui-button">Get current</button>
          </div>
          <div class="form-row" id="divTemperatureAtSwitchOn" hidden>
            <label for="node-input-colorAtSwitchOnDayTime" style="width:260px">
            </label>
            <select style="width:12%;" id="comboTemperatureAtSwitchOn"></select>
            <select  style="width:25%;" id="comboBrightnessAtSwitchOn"></select>      
          </div>

          <div id="divCCSBoxAtNightLighting">
            <div class="form-row">
              <label for="node-input-enableDayNightLighting" style="width:260px;">
                <i class="fa fa-clone"></i> Night Lighting
              </label>
              <select id="node-input-enableDayNightLighting">
                <option value="no">No night lighting</option>
                <!-- <option value="temperature">Select temperature and brightness</option>
                <option value="yes">Select color</option> -->
              </select>
            </div>

            <div id="divEnableDayNightLighting">

              <div class="form-row" id="divColorsAtSwitchOnNightTime">
                <label for="node-input-colorAtSwitchOnNightTime" style="width:260px"></label>
                <input type="hidden" id="node-input-colorAtSwitchOnNightTime">
                <input type="color" id="colorPickerNight" style="width:260px">
                <button id="getColorAtSwitchOnNightTimeButton" type="button" class="red-ui-button">Get current</button>
              </div>
              <div class="form-row" id="divTemperatureAtSwitchOnNightTime" hidden>
                <label for="node-input-colorAtSwitchOnNightTime" style="width:260px"></label>
                <select style="width:25%;" id="comboTemperatureAtSwitchOnNightTime"></select>
                <select style="width:25%;" id="comboBrightnessAtSwitchOnNightTime"></select>      
              </div>

              <div class="form-row">
                <label for="node-input-nameDaylightSensor" style="width:110px;"><i class="fa fa-clock-o"></i>
                  Day/Night</label>
                <label for="node-input-GADaylightSensor" style="width:20px;">GA</label>
                <input type="text" id="node-input-GADaylightSensor" placeholder="Ex: 1/1/1"
                  style="width:70px;margin-left: 5px; text-align: left;">

                <label for="node-input-dptDaylightSensor" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
                <select id="node-input-dptDaylightSensor" style="width:140px;"></select>

                <label for="node-input-nameDaylightSensor" style="width:50px; margin-left: 0px; text-align: right;"><span
                    data-i18n="knxUltimateHueLight.node-input-name"></span></label>
                <input type="text" id="node-input-nameDaylightSensor" style="width:190px;margin-left: 5px; text-align: left;">
              </div>
              <div class="form-row">
                <label style="width:170px" for="node-input-invertDayNight">
                  <i class="fa fa-shuffle"></i> Invert day/night value
                </label>
                <input type="checkbox" id="node-input-invertDayNight"
                  style="display:inline-block; width:auto; vertical-align:top;" />
              </div>
              <div class="form-row">
                <label for="node-input-restoreDayMode" style="width:260px;">
                  <i class="fa fa-circle"></i> Override night mode
                </label>
                <select id="node-input-restoreDayMode">
                  <option value="no">No</option>
                  <option value="setDayByFastSwitchLightSingle">Switch to DAY mode by rapid switching the ligth off then on. (This light only)</option>
                  <option value="setDayByFastSwitchLightALL">Switch to DAY mode by rapid switching the ligth off then on (apply yo ALL light nodes)</option>
                </select>
              </div>
            </div>
          </div>
          <br/>
        </div>
        <div class="form-row">
          <label for="node-input-enableNodePINS" style="width:260px;">
            <i class="fa fa-circle"></i> Node Input/Output PINs
          </label>
          <select id="node-input-enableNodePINS">
            <option value="no">Hide</option>
            <option value="yes">Show node input/output PINs</option>
          </select>
        </div>
        </p>
      </div>
      <div id="tabs-7">
        <p>
          <br/> <b>YAML</b> <br/>
          <div style="height: 220px; min-height:150px;" class="node-text-editor" id="aceEditor"></div>
          <!-- <button type="button" class="red-ui-button">Button</button> -->
        </p>
      </div>
    </div>
  </div>
<br />
</script>


<script type="text/markdown" data-help-name="knxUltimateHueLight">
<p>This node lets you control your Philips HUE light and grouped lights and also gets the states of this lights, to be sent to the KNX bus.</p>

**General**
|Property|Description|
|--|--|
| KNX GW | Select the KNX gateway to be used |
| HUE Bridge | Select the HUE Bridge to be used |
| Name | HUE light or HUE grouped light to be used. The avaiable lights and groups start showing up while you're typing.|

<br/>

**OPTIONS**

Here you can choose the KNX addresses to be linked to the avaiable HUE light commands/states.<br/>
Start typing in the GA field, the name or group address of your KNX device, the avaiable devices start showing up while you're typing.

**Switch**
|Property|Description|
|--|--|
| Control | This GA is used to turn on/off the HUE light via a boolean KNX value true/false|
| Status | Link this to the light's switch status group address|

<br/>

**Dim**
|Property|Description|
|--|--|
| Control dim | Relative DIM the HUE light. You can set the dimming speed in the **_Behaviour_** tab. |
| Control % | Changes the absolute HUE light's brightness (0-100%)|
| Status % | Link this to the light's brightness status KNX group address |
| Dim Speed (ms)                            | The dimming speed, in Milliseconds. This applies to the **light** and also to the **tunable white** dimming datapoints. It' calculated from 0% to 100%.       |
| Min Dim brightness                        | Tha Minimum brightness that the lamp can reach. For example, if you are dimming the light down, the light will stop dimming at the specified brightness %.    |
| Max Dim brightness                        | Tha Maximum brightness that the lamp can reach. For example, if you are dimming the light up, the light will stop dimming at the specified brightness %.     |

<br/>

**Tunable white**
|Property|Description|
|--|--|
| Control dim | Changes the HUE light's white temperature, using DPT 3.007 dimming. You can set the dimming speed in the **_Behaviour_** tab.|
| Control % | Changes the HUE light's white temperature, using the DPT 5.001. A value of 0 is full warm, a value of 100 is full cold.|
| Status %| The light temperature status group address. Datapoint is 5.001 absolute value. 0 is full warm, 100 is full cold.|
| Control kelvin | **DPT 7.600:** set the HUE light's temperature in Kelvin degrees, using the KNX range from 2000 to 6535. This range will be then transformed in mirek.<br/>**DPT 9.002:** set the temperature using Philips HUE range: 2000K - 6535K (Ambiance range starts at 2200K). Please be aware, conversion may produce slightly changes in Kelvin degrees value, due to KNX RGB or Kelvin degrees to HUE mirek degrees conversion.|
| Status kelvin | **DPT 7.600:** get the HUE light's temperature in Kelvin degrees, using the KNX range from 2000 to 6535. This range will be then transformed in kelvin degrees.<br/>**DPT 9.002:** get the temperature using Philips HUE range: 2000K - 6535K (Ambiance range starts at 2200K). Please be aware, conversion may produce slightly changes in Kelvin degrees value, due to KNX RGB or Kelvin degrees to HUE mirek degrees conversion. |
| Invert dim direction | Inverts the DIM direction. |
<br/>

**RGB/HSV**
|Property|Description|
|--|--|
| **RGB section** ||
| Control rgb| This command is used to change the HUE light's color. Accepted datapoint is RGB triplet (r,g,b). The node handles the gamut color correction. As soon as you send a color KNX telegran, the light turns on and sets color and brightness, derived from the brightness human perception. As soon as you send a KNX telegram with r,g,b set to zero, the light turns off |
| Status rgb | The light's color status group address. Accepted datapoint is RGB triplet (r,g,b)|
| **HSV section** ||
| Color H dim | Cycle through the HSV chromatic circle (HUE), using DPT 3.007 dimming. You can set the dimming speed in the **_Behaviour_** tab.|
| Status H %| Status of the HSV chromatic circle.|
| Control S dim | Changes the light's color saturation, using DPT 3.007 dimming. You can set the dimming speed in the **_Behaviour_** tab.|
| Status S %| The light color saturation status group address.|
| Dim Speed (ms) | The dimming speed, in Milliseconds, from bottom to top scale. |   
                                                              
For controlling the "V" (brightness) of the HSV, please use the standard controls of the **DIM** tab. 


<br/>

**Effects**
|Property|Description|
|--|--|
| Blink | _true_ Blink the light, _false_ Stop blinking. Blinks the light on and off. Useful for signalling. Works with all HUE lights. |
| Color Cycle | _true_ start cycle, _false_ Stop cycle. Randomly changes the HUE light's color at regular interval. Works with all HUE lights having color capabilities. The color effect will start 10 seconds after set. |

<br/>

**Behaviour**

| Property                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Read status at startup | Read the HUE light status at node-red's startup or node-red's full deploy, and send that status to the KNX BUS |
| KNX Brightness Status                     | Updates the KNX brightness group address status, whenever the HUE lamp is switched ON/OFF. The options are **When HUE light is Off send 0%. When HUE On, restore previous value (Default KNX behaviour)** and **Leave as is (default HUE behaviour)**. If you have KNX dimmer with brightness status, like MDT, the suggested option is ***When HUE light is Off send 0%. When HUE On, restore previous value (Default KNX behaviour)*** |
| Switch on behaviour                       | It sets the behaviour of your lights when switched on. You can choose from differents behaviours.<br/>**Select color:** the light will be switched on with the color of your choice. To change color, just CLICK on the color selector (under the *Select color* control).<br/>**Select temperature and brightness:** the light will be switched on with the temperature (Kelvin) and brightness (0-100) of your choice.<br/>**None:** the light will retain its last status. In case you've enable the night lighting, after the night time ends, the lamp will resume the color/temperature/brightness state set at day time.  |
| Night Lighting                            | It allows to set a particular light color/brightness at nighttime. The options are the same as the daytime. You could select either a temperature/brightness or color. A cozy temperature of 2700 Kelvin, with a brightness of 10% or 20%, is a good choice for  bathroom's night light.|
| Day/Night                                 | Select the group address used to set the day/night behaviour. The group address value is _true_ if daytime, _false_ if nighttime.                                                                                                                                                                                                                                                                                                                                                                    |
| Invert day/night value                   | Invert the values of _Day/Night_ group address. Default value is **unchecked**.                                                                                                                                                                                                                                                                                                                                                                                                                      |
| Read status at startup | Read the status at startup and emit the event to the KNX bus at startup/reconnection. (Default "no")|
| Override night mode | You can override the night mode by manually switching the light as described here:  **Switch to DAY mode by rapid switching the ligth off then on (This light only)** does what described and acts only on this light. **Switch to DAY mode by rapid switching the ligth off then on (apply yo ALL light nodes)** acts to ALL Light nodes, by setting the Day/Night group address to Day mode. |
| Node Input/Output PINs | Hide or show the input/output PINs. Input/output PINS allow the node to accept msg input from the flow and send msg output to the flow. Input msg must follow the HUE API v.2 Standards. This is an example msg, that turns on the light: <code>msg.on = {"on":true}</code>. Please refer to the [official HUE Api page](https://developers.meethue.com/develop/hue-api-v2/api-reference/#resource_light__id__put) | 

### Note

The Dimming function works in **KNX mode `start` and `stop`**. To start dimming, send only one "start" KNX telegram. To stop dimming, send a "stop" KNX telegram. Please **remember that**, when you set your wall swiches properties.

<br/>

**Home Assistant Export**

| Property                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| YAML                                      | Get or sets the node properties based on Home Assistant YAML format. By editing the node properties, the YAML will automatically be created. You can copy and paste it into the "knx_lights.yaml" Home Assistant config file. Not yet implemented: likewise, if you copy the single light descriptor from the "knx_lights.yaml" Home Assistant config file and paste it here, the relative node properties will be automatically set. |

<br/>

[![Donate via PayPal](https://raw.githubusercontent.com/Supergiovane/node-red-contrib-knx-ultimate/master/img/CodiceQR.png)](https://www.paypal.com/donate/?hosted_button_id=S8SKPUBSPK758)

<br/>
</script>